<!--机构端-发布岗位 -->
<template>
	<view class="container">
		<!-- 快捷模板 -->
<!-- 		<view class="template-section">
			<text class="section-title">快捷模板</text>
			<scroll-view scroll-x class="template-scroll">
				<view class="template-tag" v-for="(template, index) in templates" :key="index" @click="applyTemplate(template)">
					{{ template.name }}
				</view>
			</scroll-view>
		</view> -->

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">

				<!-- picker弹窗 -->
				<u-picker v-model="pickerShow" :mode="mode" :range="range" @confirm="confirm"></u-picker>


				<!-- 岗位名称 -->
				<view class="form-section">
					<u-form-item label="岗位名称" prop="name" label-width="240">
						<u-input v-model="form.postName" placeholder="请选择岗位名称" clearable @click="showChange('postName')" />
					</u-form-item>
				</view>

				<!-- 岗位类别 -->
				<view class="form-section">
					<u-form-item label="岗位类别" prop="Culture" label-width="240">
						<u-input v-model="form.postType" placeholder="请选择岗位类别" clearable @click="showChange('postType')" />
					</u-form-item>
				</view>

				<!-- 薪资范围 -->
				<view class="form-section">
					<u-form-item label="薪资范围" prop="Culture" label-width="240">
						<u-input v-model="form.payRange" placeholder="请选择薪资范围" clearable @click="showChange('payRange')" />
					</u-form-item>
				</view>

				<!-- 经验要求 -->
				<view class="form-section">
					<u-form-item label="经验要求" prop="Culture" label-width="240">
						<u-input v-model="form.experience" placeholder="请选择经验要求" clearable @click="showChange('experience')" />
					</u-form-item>
				</view>

				<!-- 工作地点 -->
				<view class="form-section">
					<u-form-item label="工作地点" prop="selectRegion" label-width="240">
						<u-input v-model="form.workPosition" placeholder="请选择工作地点" clearable @click="showChange('region')" />
					</u-form-item>
				</view>

				<!-- 详细地址-->
				<view class="form-section">
					<u-form-item label="详细地址" prop="name" label-width="240">
						<u-input v-model="form.positionDetail" placeholder="请输入详细地址" clearable />
					</u-form-item>
				</view>


				<!-- 岗位职责 -->
				<u-form-item label="岗位职责" prop="responsibility" label-position="top">
					<u-input type="textarea" placeholder="请输入岗位职责" v-model="form.responsible" height="200" :border="true"/>
				</u-form-item>

				<!-- 任职要求 -->
				<u-form-item label="任职要求" prop="requirement" label-position="top">
					<u-input type="textarea" placeholder="请输入岗位职责" v-model="form.served" height="200" :border="true"/>
				</u-form-item>

				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="default" @click="handleTemp" shape="circle" :custom-style="customStyleObject">
						保存草稿
					</u-button>
					<u-button type="primary" @click="handleSave" :custom-style="btuStyle" shape="circle" :loading="loading">
						发布岗位
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				loading: false,
				// 模板
				// 快捷模板
				templates: [{
						name: '康养师',
						type: 'health'
					},
					{
						name: '护理员',
						type: 'nurse'
					},
					{
						name: '康复师',
						type: 'rehab'
					},
					{
						name: '营养师',
						type: 'nutrition'
					}
				],
				//按钮统一色彩
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				// picker弹窗
				pickerShow: false,
				inputType: "", ///判断选择类别
				mode: "selector",
				range: ['硕士生以上', '硕士', '本科', '专科'],
				form: {
					postName: '', ///岗位名称
					postType: '', ///岗位类型
					payRange: '', //薪酬范围
					experience: '', //经验要求
					workPosition: '', //工作地点
					positionDetail: '', ///详细地点
					responsible : '', //岗位职责
					served: '' //任职要求
				},
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',

				},
				// 字典项处理
				dictNode:[], ///字典根项
				jobName: [], ///岗位名称
				jobClassfiy: [], ///岗位类型
				moneyName: [], ////薪资范围
				jinyan: [], ///经验要求
				tmpItem: {}, //临时存储ITEM项
				returnItem: [], ////临时存储返回项
				// 字典项处理结束
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择出生日期',
						trigger: 'change'
					}],
					jobDate: [{
						required: true,
						message: '请选择参加工作日期',
						trigger: 'change'
					}],
					Culture: [{
						required: true,
						message: '请选择学历',
						trigger: ['change', 'blur']
					}],
					iphone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^1[3-9]\d{9}$/.test(value);
							},
							message: '请输入11位手机号码',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			// 获取字典根项
			this.selectdictNode()
		},
		methods: {
			// 加载字典开始
			selectdictNode() {
				this.$u.api.querydict({
					"dictcode": "0"
				}).then(res => {
					console.log('根项字典',res)
					this.dictNode = res.data.base_info
					this.selectItem()
				})
			},
			// 查询字典项
			async selectItem() {
				// 查询岗位名称
				this.tmpItem = {} 
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '岗位名称')
				let returnItemjobName = []
				returnItemjobName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobName.length; i++) {
					this.jobName.push(returnItemjobName[i].dict_name)
				}
				// 岗位类型
				this.tmpItem = {}
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '岗位类型')
				let returnItemjobClassfiy = []
				returnItemjobClassfiy = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobClassfiy.length; i++) {
					this.jobClassfiy.push(returnItemjobClassfiy[i].dict_name)
				}
				// 薪酬范围
				this.tmpItem = {}
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '薪酬范围')
				let returnItemmoneyName = []
				returnItemmoneyName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemmoneyName.length; i++) {
					this.moneyName.push(returnItemmoneyName[i].dict_name)
				}
				// 经验要求
				this.tmpItem = {}
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '经验要求')
				let returnItemjinyan = []
				returnItemjinyan = await this.selectItemApi(this.tmpItem[0].dict_code)				
					this.jinyan.push(returnItemjinyan[i].dict_name)
				for(let i= 0; i < returnItemjinyan.length; i++) {
				}
				console.log('tmpItem-1:', this.jobName);
							
			},
			
			selectItemApi(itemcode) {
				return this.$u.api.querydict({
					"dictcode": itemcode
				}).then(res => res.data.base_info)	
			},
			// 加载字典结束
						
			// Picker弹窗
			showChange(type) {
				if (type == 'postName') {
					//岗位名称
					this.inputType = type;
					this.mode = 'selector'
					// this.range = ['康养师','工程师','营养师']
					this.range = this.jobName
					this.pickerShow = !this.pickerShow;
				} else if (type == 'postType') {
					// 岗位类别
					this.inputType = type;
					this.mode = 'selector'
					this.pickerShow = !this.pickerShow;
					// this.range = ['全职','兼职','外包']
					this.range = this.jobClassfiy					
				} else if (type == 'payRange') {
					// 薪资范围
					this.mode = type;
					this.inputType = type;
					this.mode = 'selector'
					// this.range = ['3000-6000','6000-1W', '1W-1,5W','1.5W以上'];
					this.range = this.moneyName
					this.pickerShow = !this.pickerShow;
				} else if (type == 'experience') {
					// 岗位经验
					this.mode = type;
					this.inputType = type;
					this.mode = 'selector'
					// this.range = ['不限','1-3年', '3-5年','5-10年','10年以上'];
					this.range = this.jinyan
					this.pickerShow = !this.pickerShow;
				}	else {
					// 地区region
					this.mode = type;
					this.inputType = type;
					this.pickerShow = !this.pickerShow;
				}
			},

			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'postName') {
					this.form.postName = this.range[e[0]]
				} else if (this.inputType == 'postType') {
					this.form.postType = this.range[e[0]]
				} else if (this.inputType == 'payRange') {
					this.form.payRange = this.range[e[0]];
				} else if (this.inputType == 'experience') {
					this.form.experience = this.range[e[0]];
				} else {
					// 赋值地区
					this.form.workPosition = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},

			// 保存草稿
			handleTemp() {
				// uni.navigateBack();
				this.$u.api.savegwtemp({
					"gwiflowid":"",
					"usercode": uni.getStorageSync('usercode'),
					"gwiname": this.form.postName,
					"gwitype": this.form.postType,
					"gwioffer": this.form.payRange,
					"gwiexptype": this.form.experience,
					"gwiworkaddr": this.form.workPosition,
					"gwiaddr": this.form.positionDetail,
					"gwigangweiduty": this.form.responsible,
					"gwirenzhiduty": this.form.served			
				}).then(res => {
					console.log('发布岗位-草稿：', res)
					uni.switchTab({
						url: '/pages/instTabBar/invite',
					})
				})
			},

			// 保存发布
			handleSave() {
				this.$u.api.savegw({	
					"gwiflowid":"",
					"usercode": uni.getStorageSync('usercode'),
					"gwiname": this.form.postName,
					"gwitype": this.form.postType,
					"gwioffer": this.form.payRange,
					"gwiexptype": this.form.experience,
					"gwiworkaddr": this.form.workPosition,
					"gwiaddr": this.form.positionDetail,
					"gwigangweiduty": this.form.responsible,
					"gwirenzhiduty": this.form.served			
				}).then(res => {
					console.log('发布岗位：', res)
					uni.switchTab({
						url: '/pages/instTabBar/invite',
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		background-color: #F1F7F7;
		min-height: 100vh;


		.template-section {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.section-title {
				font-size: 36rpx;
				color: #666;
				display: block;
				margin-bottom: 20rpx;
			}

			.template-scroll {
				white-space: nowrap;
				width: 100%;

				.template-tag {
					display: inline-block;
					padding: 12rpx 30rpx;
					background-color: #f0f7ff;
					border-radius: 30rpx;
					color: #03B8CD;
					margin-right: 20rpx;
					font-size: 32rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 8rpx;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>